const tbody = document.querySelector("tbody");

// 查询成绩数据
async function getScoreList() {
  const result = await axios({ url: "/score/list" });
  const data = result.data.data; // data 是一个对象！！
  // console.log(result.data.data);

  let html = "";
  // 对象做遍历
  for (const key in data) {
    // key  1233
    // data[key].name
    // data[key].score
    html += `
    <tr>
        <th scope="row">${key}</th>
        <td>${data[key].name}</td>
        <td class="score" data-id="${key}" data-batch="${1}">${
      data[key].score[0]
    }</td>
        <td class="score" data-id="${key}" data-batch="${2}">${
      data[key].score[1]
    }</td>
        <td class="score" data-id="${key}" data-batch="${3}">${
      data[key].score[2]
    }</td>
        <td class="score" data-id="${key}" data-batch="${4}">${
      data[key].score[3]
    }</td>
        <td class="score" data-id="${key}" data-batch="${5}">${
      data[key].score[4]
    }</td>
      </tr>
    `;
  }

  // 渲染标签
  tbody.innerHTML = html;
}

// 查询成绩数据
getScoreList();

// 给成绩 单元格绑定双击事件
tbody.addEventListener("dblclick", function (e) {
  // 判断当前点击的标签是不是你想要
  if (e.target.classList.contains("score")) {
    // 动态的创建input标签在当前的单元格内  dom的操作
    const input = document.createElement("input");
    input.type = "text";

    // 插入到对应位置上 ！！  td标签
    e.target.append(input);

    // 设置标签显示出来
    input.style.display = "block";
    // 重新把输入框内的值 设置回input标签身上
    // innerText 足够了解
    input.value = e.target.innerText; // 显示旧成绩

    // 让input标签自动获得焦点
    input.focus();

    // 给input绑定抬起键盘 判断按下是不是回车键
    input.addEventListener("keyup", function (ev) {
      if (ev.key === "Enter") {
        eventFunc();
        // 事件解绑
        input.removeEventListener("blur", eventFunc);
      }
    });

    // 失去焦点
    input.addEventListener("blur", eventFunc);

    // 按下回车和失去焦点 事件处理函数
    async function eventFunc() {
      const { id, batch } = e.target.dataset;
      // console.log(id, batch, input.value);
      // 发送post请求
      const result = await axios({
        url: "/score/entry",
        method: "post",
        data: {
          stu_id: id,
          batch,
          score: input.value,
        },
      });
      console.log(result);
      if (result.data.code === 0) {
        toastr.success("修改成绩成功");
        // 刷新页面数据
        getScoreList();
      }
    }
  }
});
